<!-- 以下代码为代码生成器生成，生成时间: 2018-03-19 22:07:08，作者：billjiang/475572229@qq.com-->
<section class="content-header">
	<h1>
		视频监控 <small>九宫格</small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="${basePath}"><i class="fa fa-dashboard"></i> 首页</a></li>
		<li><a href="#">视频监控</a></li>
		<li class="active">视频列表</li>
	</ol>
</section>

<section id="vodeoContext" class="content">
		
<!-- 		<div class="row">

		<div class="col-md-4">
			Box Comment
			<div class="box box-widget">
			
				<div class="box-header with-border">
				
					<div class="user-block">
						<img class="img-circle" src="${basePath}/resources/adminlte/dist/img/user1-128x128.jpg" /> 
						<span class="username">1号摄像头.</span> 
						<span class="description">大棚东南面-球机</span>
					</div>
				</div>
				/.box-header
				<div class="box-body" style="height: 320px;">
					<iframe src="${basePath}/camera/videoShow/4028f7816320f83e016320f916a50000" width="100%" height="100%" frameborder="0"></iframe>
				</div>
				/.box-body
				<div class="box-footer" style="text-align:center;">
					<a href="#"><i class="fa fa-arrows-alt"></i> 点击放大和控制</a>
				</div>
			</div>
			/.box
		</div>

	</div> -->

</section>

<script>
	$(function() {
		var cameras;
		ajaxPost(basePath + "/camera/getAll", null, function(data) {
			if(data.success){
				cameras = data.data;
			}
		});
		if(cameras && cameras.length > 0){
			var index = cameras.length;
			var innerHtml = '';
			for(var z=0;z<index;z++){
				if(z %3 == 0) {
					innerHtml += '<div class="row">';
				}
				innerHtml += '<div class="col-md-4">';
 				innerHtml += '	<div class="box box-widget">';
				innerHtml += '		<div class="box-header with-border">';
				innerHtml += '			<div class="user-block">';
				innerHtml += '				<img class="img-circle" src="${basePath}/resources/adminlte/dist/img/user1-128x128.jpg" />';
				innerHtml += '				<span class="username">'+cameras[z].name+'</span>';
				innerHtml += '				<span class="description">'+cameras[z].cameraAdd+'</span>';
				innerHtml += '			</div>';
				innerHtml += '		</div>';
				innerHtml += '		<div class="box-body" style="height: 320px;">';
				innerHtml += '			<iframe src="${basePath}/camera/videoShow/'+cameras[z].id+'" width="100%" height="100%" frameborder="0"></iframe>';
				innerHtml += '		</div>';
				innerHtml += '		<div class="box-footer" style="text-align:center;">';
				innerHtml += '			<a target="_blank" href="${basePath}/camera/openVideos/'+cameras[z].id+'"><i class="fa fa-arrows-alt"></i> &nbsp;点击放大和控制</a>';
				innerHtml += '		</div>';
				innerHtml += '	</div>';
				innerHtml += '</div>';
				
				if(z !=0 && (z+1)%3 == 0){
					innerHtml += '</div>';
				}
			}
			if(index % 3 !=0){
				innerHtml += '</div>';
			}
			$("#vodeoContext").append(innerHtml);
		}
		
	})

	
</script>